<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item style="font-weight: 700" label="到店时间">
                <el-date-picker v-model="createTime" type="daterange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item style="font-weight: 700" label="客户名称">
                <el-input clearable v-model="formInline.customerName"></el-input>
            </el-form-item>
            <el-form-item style="font-weight: 700" label="客户电话">
                <el-input  clearable v-model="formInline.customerPhone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="searchFn">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="ResetFn">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="customerPhone" label="电话号码" width="180">
            </el-table-column>
            <el-table-column prop="statisticalAmount" label="消费金额">
            </el-table-column>


        </el-table>
        <div class="page">
            <el-pagination :page-size="formInline.pageSize" :page-sizes="[10, 20, 30, 50]" background
                :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
import { customerConsumeReportAPI, searchCustomerConsumeReportAPI } from "@/API/hbaip/api";
export default {
    data() {
        return {
            tableData: [],
            currentPage: 1,
            total: 0,
            createTime: [],
            formInline: {
                startTime: "",
                endTime: "", 
                customerPhone: undefined,
                customerName:undefined,
                 pageNum: 1,
                pageSize: 10,

            },
        }
    },
    created() {
        this.getCustomerConsumeReport()
    },
    methods: {
        handleSizeChange(val) {
            customerConsumeReportAPI({
                dateStatus: this.formInline.auditType,
                pageNum: this.formInline.pageNum,
                pageSize: val,
            }).then((d) => {
                this.tableData = d.data.list
                this.total = d.data.total
            });
            this.formInline.pageSize = val
        },
        handleCurrentChange(val) {
            customerConsumeReportAPI({
                dateStatus: this.formInline.auditType,
                pageNum: val,
                pageSize: this.formInline.pageSize,
            }).then((d) => {
                this.tableData = d.data.list
                this.total = d.data.total
            });
            this.formInline.pageNum = val;
        },
        // 重置
        ResetFn() {
            this.createTime = []
            this.formInline.customerName=''
            this.formInline.customerPhone=''
            this.getCustomerConsumeReport();
        },
        // 搜索
        searchFn() {
            this.formInline.startTime = this.createTime[0]
            this.formInline.endTime = this.createTime[1]
            // for(let key in this.formInline){
            //     if( this.formInline[key]==""){
            //         this.formInline[key]=undefined
                    
              
            //     }
            // }
           
          
            searchCustomerConsumeReportAPI(
                this.formInline
            ).then((res) => {
                this.tableData = res.data.list
                this.total = res.data.total
            })
        },
        async getCustomerConsumeReport() {
            let res = await customerConsumeReportAPI({
                pageNum: this.formInline.pageNum,
                pageSize: this.formInline.pageSize,
            })
            this.tableData = res.data.list
            this.total = res.data.total
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-date-editor {
    width: 240px;
}

/deep/ .el-select {
    width: 176px;
}
/deep/ .el-table .el-table__header-wrapper th {
            background-color: #f8f8f9;
            color: #515a6e;
            height: 40px;
            font-size: 13px;
            font-weight: 700;
        }

.page {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>